<template>

  <div class="app">
    <el-row>
      <el-col :span="4" class="page">
        <el-col><router-link to="/home" class="link">Home</router-link></el-col>
        <el-col><router-link to="/about" class="link">About</router-link></el-col>
      </el-col>
      <el-col :span="20" class="page">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {

}
</script>

<style>
  *{
    padding: 0; margin: 0px;
  }
  .app{
    width: 60%;
    margin: 0 auto;
  }
  .app .page{
    min-height: 200px;
    background: antiquewhite;
    border-style:solid;
    border-color:#CCCCCC;
    border-width: 1px;
    border-radius: 3px;
  }
  .app .page .el-col{
    min-height: 0px;
  }
  .app .page .link{
    width: 100%;
    height: 40px;
  }
  .app .page .el-button{
    width: 100%;
  }
</style>
